<template>
    <div class="baidumap-container">
        <div id="baiduMap"></div>
        <div
            v-show="isOpenSmallPanorama"
            class="small-panorama"
            id="smallPanorama"
        >
            <!-- <div class="big-screen">全屏</div> -->
        </div>
        <!-- <div v-show="isOpenBigPanorama" class="big-panorama" id="bigPanorama"></div> -->
    </div>
</template>

<script>
import loadBMap from "@/libs/bdMap/loadBMap.js";
import loadTrafficControl from "@/libs/bdMap/loadTrafficControl.js";
import loadHeatmap from "@/libs/bdMap/loadHeatmap.js";
let map = null;
let heatmapOverlay = null; //热力图实例

export default {
    name: "BaiduMap",
    components: {},
    data() {
        return {
            themeIndex: 0,
            isOpenTranfic: false, //是否打开路况
            tranficCtrl: null, //路况控件
            isOpenSmallPanorama: false, //是否打开街景弹框
            isOpenSP: false, //是否打开街景
            panoramaCoverageLayer: null,
            //isOpenBigPanorama: false, //全景大弹窗
            centerLocation: JSON.parse(
                localStorage.getItem("ilinkBs_mapLocation") || "0"
            ),
            markArrByType: [], //标注物集合 markArrByType[type] = markObjArr;
            markLableArr: [], //标注物hover标题集合
            driving: null, //导航对象
            DriveStart_lon: null, //导航开始经纬度
            DriveStart_lat: null, //导航开始经纬度
            DriveEnd_lon: null, //导航结束经纬度
            DriveEnd_lat: null, //导航结束经纬度
            markerInfo_position: [], //地图消防设施图点集合
            pushMarkInfor: {
                0: [], //推送探测器打点合集
                32: [], //推送隐患打点合集
                34: [], //推送单位分数打点合集
                51: [] //推送楼栋打点合集
            },
            markDataList: [], //清除功能回调的打点集合
            input1: "",
            input2: ""
        };
    },
    computed: {},
    watch: {},
    created() {
        let that = this;
        //     //Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。
        //     map.panTo(new BMap.Point(116.319769,39.976546));

        window.FunList.int_LocalSearch = that.int_LocalSearch;
        window.FunList.fixedPosition_BaiduMap = that.eqLocation;
        window.FunList.beginDrive_BaiduMap = that.beginDrive;
        window.FunList.changeTheme_BaiduMap = that.changeBaiduMapTheme;
        window.FunList.tranficStatus_BaiduMap = that.showTranficStatus;
        window.FunList.openPanoramaWind_BaiduMap = that.openPanoramaWind;
        window.FunList.pushDataToMap_BaiduMap = that.pushDataToMap;
        window.FunList.periphery_BaiduMap = that.searchNearby;
        window.FunList.clearanceMarkers_BaiduMap = that.clearanceMarkers;
        window.FunList.around_BaiduMap = that.lookAround;
        window.FunList.addCallmarker_BaiduMap = that.addCallmarker;
        window.FunList.openHeatmap_BaiduMap = that.openHeatmap;
    },
    methods: {
        initBaiduMap(options, callback) {
            let that = this;
            if (options && options.longitude && options.latitude) {
                that.centerLocation = {
                    lon: options.longitude,
                    lat: options.latitude,
                    zoom: options.zoom || 15
                };
            }
            loadBMap()
                .then(() => {
                    map = new BMap.Map("baiduMap", {
                        /*minZoom : 6,
            maxZoom : 18,*/
                        enableMapClick: false //关闭底图可点功能
                    });
                    let point = new BMap.Point(
                        that.centerLocation.lon,
                        that.centerLocation.lat
                    );
                    map.centerAndZoom(point, that.centerLocation.zoom);
                    map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
                    map.setMapStyleV2({
                        styleId: that.GLOBAL.mapStyleArr[1].style
                    });
                    // 执行回调
                    callback && callback(options);
                    loadTrafficControl();
                    loadHeatmap();
                })
                .catch(err => {
                    console.error("地图加载失败");
                });
        },
        initBaiduMapMarks(markData, isClear, isFormHome) {
            let that = this;
            that.markDataList = {};
            that.markDataList = {
                //清除回调的打点集合
                markData: markData,
                isClear: isClear,
                isFormHome: isFormHome
            };
            if (isClear) {
                map.clearOverlays();
                that.markerInfo_position = [];
                that.pushMarkInfor = {
                    0: [], //推送探测器打点合集
                    32: [], //推送隐患打点合集
                    34: [], //推送单位分数打点合集
                    51: [] //推送楼栋打点合集
                };
            }
            console.log(markData);
            //清空所有标注物
            //打上点
            if (!markData) {
                that.$Ctl.message("暂无该地图标注", "info");
                return;
            } else {
                if (isFormHome) {
                    //单、多单位首页标注物展示，较复杂的数据结构
                    that.initAlarmEquipt(markData);
                } else {
                    //设备一张图等详情页面标注物展示
                    for (let typeName in markData) {
                        that.addMarksByType(markData[typeName] || [], typeName);
                    }
                }
            }
        },
        //加载初始化报警设备
        initAlarmEquipt(markData) {
            let that = this;
            for (let typeName in markData) {
                if (typeName !== "init3dData" && typeName !== "hidden") {
                    $.each(markData[typeName] || [], (index, data) => {
                        that.addMarksByType(data.data, data.type);
                    });
                }
            }
        },
        addMarksByType(markArr, markType) {
            let that = this;
            let tempArr = [];
            let IconData = that.GLOBAL.mapMarkJsonData[markType];
            if (!IconData) return;
            let iconTogether = IconData["bdIconTogether"] || null;
            let iconTogetherW = IconData["iconTogetherW"] || null;
            let iconTogetherH = IconData["iconTogetherH"] || null;
            $.each(markArr || [], (index, data) => {
                let icon = IconData["bdIcon"];
                let iconW = IconData["iconW"] || 50;
                let iconH = IconData["iconH"] || 50;
                let _lon,
                    _lat,
                    _status = 0;
                if (data.lon && data.lat) {
                    _lon = data.lon;
                    _lat = data.lat;
                } else if (data.info3d) {
                    _lon = JSON.parse(data.info3d).lon;
                    _lat = JSON.parse(data.info3d).lat;
                } else if (data.markInfo) {
                    _lon = data.markInfo.lon;
                    _lat = data.markInfo.lat;
                }
                if (!_lon || !_lat) return;
                let obj = {};
                if (data.status) {
                    _status = data.status;
                    obj.status = _status;
                }
                obj.longitude = _lon;
                obj.latitude = _lat;
                obj.id = data.id;
                obj.val = data.val || "";
                obj.orgId = data.orgId || "";
                obj.markType = markType;
                obj.markName = data.markName || data.name;
                obj.markInfo = data.markInfo || "";
                if (markType == 34) {
                    //单位安全指数
                    icon = icon[that.getScore_Industry(data.val)];
                } else if (markType == 33) {
                    //维保信息------建筑物
                    icon = IconData["bdIcon"];
                    obj.markName = data.markInfo.name;
                    obj.val = (data.percent || 0) + "%";
                    obj.id = data.markInfo.id;
                } else if (markType == 32) {
                    //隐患信息------建筑物
                    obj.val = data.val || data.hiddenDetail;
                    icon = icon[obj.val.status];
                } else if (markType == 22) {
                    //巡检点位
                    icon = icon[data.result] || icon[2];
                } else if (markType == 51) {
                    //楼栋警情概况
                    if(!data.val.status) return true; // 正常的楼栋不标注
                    icon = icon[data.val.status];
                }
                obj.icon = icon;
                that.addOnePoint(
                    obj,
                    function(res) {
                        tempArr.push(res);
                    },
                    function(clickData) {
                        if (markType == 22) {
                            //巡检点位
                            that.$Ctl.openPopup("PatrolPoint", clickData.id);
                        } else if (markType == 32) {
                            //隐患信息------建筑物
                            that.$Ctl.openPopup(
                                "HiddenDanger",
                                clickData.val.id
                            );
                        } else if (markType == 3 || markType == 4) {
                            //播放视频
                            if (!that.$Ctl.getClickEnabel(1)) return;
                            that.$Ctl.getVideoDetail(clickData.id);
                        } else if (
                            markType == 81 ||
                            markType == 82 ||
                            markType == 83
                        ) {
                            //消防车
                            that.$Ctl.openPopup("CarDetail", clickData.id);
                        } else if (markType == 34) {
                            //单位安全指数
                            that.$Ctl.enterSingleHome({
                                orgId: clickData.orgId
                            });
                        } else if (markType == 33) {
                            //维保
                            that.$Ctl.enterChild("Maintenance", {
                                orgIds: clickData.markInfo.orgId,
                                fbsId: clickData.markInfo.bizId
                            });
                        } else if (markType == 51) {
                            //楼栋警情概况
                            that.$Ctl.enterDetail("EquipmentList", {
                                name: "",
                                fbsId: clickData.val.fbsId,
                                status: clickData.val.status,
                                orgId: clickData.val.orgId
                            });
                        } else {
                            //常规探测器集合
                            that.$Ctl.openPopup("DeviceDetails", clickData.id);
                        }
                    },
                    iconW,
                    iconH
                );
            });
            //聚合
            if ([51, 34, 33, 32, 22].indexOf(parseFloat(markType)) < 0) {
                that.baiduMapTogether(
                    tempArr,
                    iconTogether,
                    function(data) {},
                    iconTogetherW,
                    iconTogetherH
                );
            }
            if (markType == 22) {
                //巡检点位
                that.addLine(markArr);
            }

            if (markType == 32) {
                //让隐患排在最上面
                setTimeout(() => {
                    $(".bdmap-hidden-popup")
                        .parent()
                        .addClass("zIndex-hidden");
                }, 500);
            }

            that.markArrByType[markType] = tempArr;
        },
        markHover(markPoint, name) {
            let that = this;
            if (!name || !markPoint) {
                return;
            }
            markPoint.addEventListener("mouseover", e => {
                if (that.markLableArr.length > 0) {
                    for (let i = 0; i < that.markLableArr.length; i++) {
                        map.removeOverlay(that.markLableArr[i]);
                    }
                }
                let markerLabel = new BMap.Label(
                    "<div>" + $.trim(name) + "</div>",
                    {
                        offset: new BMap.Size(15, 25),
                        position: e.point
                    }
                );
                markerLabel.setStyle({
                    width: "auto",
                    height: "auto",
                    color: "#fff",
                    fontSize: "16px",
                    backgroundColor: "rgba(3,4,26,.83)",
                    border: "none",
                    borderRadius: "4px",
                    textAlign: "left",
                    padding: "15px",
                    lineHeight: "15px"
                });
                markerLabel.setZIndex(19891013);
                map.addOverlay(markerLabel);
                that.markLableArr.push(markerLabel);
            });
            markPoint.addEventListener("mouseout", e => {
                if (that.markLableArr.length > 0) {
                    for (let i = 0; i < that.markLableArr.length; i++) {
                        map.removeOverlay(that.markLableArr[i]);
                    }
                }
            });
        },
        addOnePoint(data, successBack, clickback, iconW, iconH) {
            //创建成功后先不标点为了聚合
            //消防设施用mark画，其他用div自定义
            let that = this;
            let markType = data.markType;
            let position = new BMap.Point(
                parseFloat(data.lon || data.longitude),
                parseFloat(data.lat || data.latitude)
            );

            // offset: new BMap.Size(10, 25), // 指定定位位置
            //imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移
            let markerInfo = ""; //标注物
            let labelBG = ""; //背景或者文本标注物
            if (markType == 34) {
                //单位安全指数
                labelBG = new BMap.Label(
                    '<div class="bdmap-score-popup" style="background-image:url(' +
                        data.icon +
                        ');">' +
                        data.val +
                        "</div>",
                    {
                        offset: new BMap.Size(-60, -80),
                        position: position // 指定文本标注所在的地理位置
                    }
                ); // 创建文本标注对象
            } else if (markType == 33) {
                //维保信息------建筑物
                labelBG = new BMap.Label(
                    '<div class="bdmap-maintain-popup" style="background-image:url(' +
                        data.icon +
                        ');"><div class="orgname">' +
                        data.markName +
                        '</div><div class="score">' +
                        data.val +
                        "</div></div>",
                    {
                        offset: new BMap.Size(-123, -105),
                        position: position // 指定文本标注所在的地理位置
                    }
                ); // 创建文本标注对象
            } else if (markType == 32) {
                //隐患信息------建筑物
                //隐患状态1:整改中、2:已完成，3:核实中
                let pic = data.val.picUrls;
                if (!pic) return;
                pic = pic.split(",")[0];
                if(pic.substring(pic.length-3) == 'mp4'){
                    pic = require('../../assets/images/videoImgDetail/video_detail.png')
                }
                labelBG = new BMap.Label(
                    '<div class="bdmap-hidden-popup" style="background-image:url(' +
                        pic +
                        ');"><img src="' +
                        data.icon +
                        '"/></div>',
                    {
                        offset: new BMap.Size(-90, -90),
                        position: position // 指定文本标注所在的地理位置
                    }
                ); // 创建文本标注对象
            } else if (markType == 51) {
                //楼栋警情概况
                labelBG = new BMap.Label(
                    '<div class="bdmap-alramNum-popup" style="background-image:url(' +
                        data.icon +
                        ');">' +
                        data.val.count +
                        "</div>",
                    {
                        offset: new BMap.Size(-75, -75),
                        position: position // 指定文本标注所在的地理位置
                    }
                ); // 创建文本标注对象
            } else if (markType == 22) {
                //巡检点位
                labelBG = new BMap.Label(
                    '<div class="bdmap-inspect-popup" style="background-image:url(' +
                        data.icon +
                        ');"></div>',
                    {
                        offset: new BMap.Size(-50, -50),
                        position: position // 指定文本标注所在的地理位置
                    }
                ); // 创建文本标注对象
            } else {
                //探测器打点
                let myIcon = new BMap.Icon(
                    data.icon,
                    new BMap.Size(iconW || 50, iconH || 50),
                    { offset: new BMap.Size(-25, -25) }
                );
                markerInfo = new BMap.Marker(position, { icon: myIcon });
                markerInfo.setZIndex(21);
                if (data.status) {
                    let bgColor = "bg-" + (data.status ? data.status : 80);
                    /* let myIcon_bg = new BMap.Icon(that.GLOBAL.mapMarkJsonData["bg-alarm"][data.status], new BMap.Size(127,117), {offset: new BMap.Size(-63.5, -59.5)});
                    labelBG = new BMap.Marker(position, {icon: myIcon_bg});
                    labelBG.setZIndex(20); */
                    labelBG = new BMap.Label(
                        "<div class='map-circle bdwave " +
                            bgColor +
                            "'><div class='w1  " +
                            bgColor +
                            "'></div><div class='w2  " +
                            bgColor +
                            "'></div><div class='w3  " +
                            bgColor +
                            "'></div><div class='w4  " +
                            bgColor +
                            "'></div></div>",
                        {
                            position: position, // 指定文本标注所在的地理位置
                            offset: new BMap.Size(-20, -20) //设置文本偏移量
                        }
                    ); // 创建文本标注对象
                }
            }
            (markerInfo ? markerInfo : labelBG).markData = data; //给标注物塞值
            //markerInfo && map.addOverlay(markerInfo);
            labelBG.setStyle &&
                labelBG.setStyle({
                    border: "0",
                    background: "transparent"
                });
            labelBG && map.addOverlay(labelBG);
            if ([32, 34, 51].indexOf(parseFloat(markType)) > -1) {
                //隐患、单位安全指数、报警个数
                that.pushMarkInfor[markType].push({
                    markerInfo: labelBG
                });
            } else if ([22, 33].indexOf(parseFloat(markType)) > -1) {
                //巡检、维保
            } else {
                //探测器
                that.pushMarkInfor[0].push({
                    markerInfo: markerInfo,
                    markerBg: labelBG
                });
            }
            markerInfo.enableMassClear && markerInfo.enableMassClear(); //允许清除
            if (successBack) {
                successBack(markerInfo ? markerInfo : labelBG);
            }
            if (clickback) {
                (markerInfo ? markerInfo : labelBG).addEventListener(
                    "click",
                    e => {
                        clickback(
                            e.currentTarget.markData,
                            markerInfo ? markerInfo : labelBG
                        );
                    }
                );
            }
            that.markHover(
                markerInfo ? markerInfo : labelBG,
                data.markName || data.name
            );
        },
        baiduMapTogether(data, icon, callback, size1, size2) {
            let that = this;
            if (data.length > 0) {
                let lastIndex = data.length - 1;
                let animFlag = data[lastIndex].setAnimation;
                /* if(!animFlag){ */
                $.each(data, (index, obj) => {
                    map.addOverlay(obj);
                    animFlag && that.markerInfo_position.push(obj);
                });
                /* }else if(lastIndex==0){
                    map.addOverlay(data[0]);
                    that.markerInfo_position.push(data[0]);
                }else{
                    map.addOverlay(data);
                } */
                let lastPData = data[lastIndex].markData
                    ? data[lastIndex].markData
                    : data[lastIndex].point;
                let position = new BMap.Point(
                    lastPData.lon || lastPData.longitude || lastPData.lng,
                    lastPData.lat || lastPData.latitude
                );
                map.centerAndZoom(position, 19);
                if (animFlag) {
                    data[lastIndex].setAnimation(BMAP_ANIMATION_DROP);
                }
            }
        },
        //切换主题
        changeBaiduMapTheme() {
            let that = this;
            if (that.themeIndex < that.GLOBAL.mapStyleArr.length - 1) {
                that.themeIndex++;
            } else {
                that.themeIndex = 0;
            }
            map.setMapStyleV2({
                styleId: that.GLOBAL.mapStyleArr[that.themeIndex].style
            });
        },
        //路况
        showTranficStatus() {
            let that = this;
            if (!that.isOpenTranfic) {
                that.tranficCtrl = new BMapLib.TrafficControl();
                map.addControl(that.tranficCtrl);
                that.tranficCtrl.showTraffic({
                    predictDate: { hour: 15, weekday: 5 }
                });
                that.isOpenTranfic = true;
            } else {
                that.clearTranficStatus();
            }
        },
        //清空路况
        clearTranficStatus() {
            let that = this;
            if (that.tranficCtrl) {
                that.isOpenTranfic = false;
                that.tranficCtrl.hideTraffic();
                map.removeControl(that.tranficCtrl);
                that.tranficCtrl = null;
            }
        },
        //全景
        openPanoramaWind() {
            let that = this;
            if (!that.isOpenSP) {
                that.isOpenSP = true;
                that.panoramaCoverageLayer = new BMap.PanoramaCoverageLayer();
                map.setDefaultCursor("crosshair");
                map.addEventListener("mousedown", that.getCurentPanorama);
                map.addTileLayer(that.panoramaCoverageLayer); //添加一个自定义地图图层 创建全景覆盖区域图层的实例
            } else {
                that.destroyPanorama();
            }
        },
        getCurentPanorama(e) {
            let that = this;
            if (!that.isOpenSmallPanorama) {
                that.isOpenSmallPanorama = true;
                let panoramaPoint = new BMap.Point(e.point.lng, e.point.lat);
                let panoramaService = new BMap.PanoramaService(); //检索全景数据信息。
                panoramaService.getPanoramaByLocation(panoramaPoint, function(
                    data
                ) {
                    let panoramaId = data.id; //全景id
                    let panorama = new BMap.Panorama("smallPanorama", {
                        navigationControl: false
                    });
                    panorama.setPosition(panoramaPoint);
                    map.setDefaultCursor("auto");
                });
            }
        },
        //取消全景事件
        destroyPanorama() {
            let that = this;
            that.isOpenSP = false;
            if (that.panoramaCoverageLayer) {
                map.removeTileLayer(that.panoramaCoverageLayer); // 移除一个自定义地图图层
                that.panoramaCoverageLayer = null;
            }
            map&&map.setDefaultCursor("-webkit-grab");
            map&&map.removeEventListener("mousedown", that.getCurentPanorama);
            that.isOpenSmallPanorama = false;
        },
        //定位
        eqLocation(row) {
            let that = this;
            let stop = null;
            for (let i = 0; i < that.markerInfo_position.length; i++) {
                if (that.markerInfo_position[i].markData.id == row.id) {
                    that.markerInfo_position[i].setAnimation(
                        BMAP_ANIMATION_BOUNCE
                    );
                    stop = that.markerInfo_position[i];
                }
            }
            //大屏，地图上面有2个隐患图片，定位其中一个隐患后，当前图片应该展示在最前面
            if (row.type == 32) {
                let hiddenArr = that.pushMarkInfor[32];
                let pointObj = {};
                for (let i = 0; i < hiddenArr.length; i++) {
                    if (hiddenArr[i].markerInfo.markData.val.id == row.id) {
                        let _obj = hiddenArr[i].markerInfo.markData;
                        pointObj = {
                            hiddenDetail: {
                                id: _obj.val.id,
                                desc: _obj.val.desc,
                                picUrls: _obj.val.picUrls,
                                status: _obj.val.status
                            },
                            id: _obj.val.id, //_obj.id,
                            name: _obj.markName || "",
                            info3d: JSON.stringify({
                                lon: parseFloat(_obj.longitude),
                                lat: parseFloat(_obj.latitude)
                            })
                        };
                        break;
                    }
                }
                if (pointObj.id) {
                    that.pushDataToMap(32, pointObj);
                }
                return;
            }
            //放大地图
            if (row.info3d) {
                row.lon = JSON.parse(row.info3d).lon;
                row.lat = JSON.parse(row.info3d).lat;
            }
            map.panTo(new BMap.Point(row.lon, row.lat));
            //let point = new BMap.Point(row.lon,row.lat);
            //map.centerAndZoom(point,19)
            setTimeout(function() {
                //停止跳动
                stop ? stop.setAnimation(null) : "";
            }, 1500);
        },
        //初始化带搜索的输入框
        int_LocalSearch(inputId, initialVal) {
            let that = this;
            that.DriveStart_lon = that.centerLocation.lon || 116.319769;
            that.DriveStart_lat = that.centerLocation.lat || 39.976546;
            let acSearch = new BMap.Autocomplete({
                input: inputId,
                location: map
            });
            if (inputId.indexOf("start") > -1) {
                //判断是开始位置按钮
                that.input1 = initialVal || "";
            } else {
                //判断是结束位置按钮
                that.input2 = initialVal || "";
            }
            acSearch.setInputValue(initialVal ? initialVal : "");
            acSearch.addEventListener("onconfirm", function(e) {
                //鼠标点击下拉列表后的事件
                let _value = e.item.value;
                let myValue =
                    _value.province +
                    _value.city +
                    _value.district +
                    _value.street +
                    _value.business;
                let local = new BMap.LocalSearch(map, {
                    //智能搜索
                    onSearchComplete: function(results) {
                        if (local.getResults().getPoi(0)) {
                            let re = local.getResults().getPoi(0).point; //获取智能搜索的结果
                            let title = local.getResults().getPoi(0).title;
                            if (inputId.indexOf("start") > -1) {
                                //判断是开始位置按钮
                                that.DriveStart_lon = re.lng;
                                that.DriveStart_lat = re.lat;
                                that.input1 = title;
                            } else {
                                //判断是结束位置按钮
                                that.DriveEnd_lon = re.lng;
                                that.DriveEnd_lat = re.lat;
                                that.input2 = title;
                            }
                        } else {
                            that.$Ctl.message("暂无该位置信息", "error");
                        }
                    }
                });
                local.search(myValue);
            });
        },
        //开始导航
        beginDrive(type) {
            let that = this;
            if (
                !that.input1 ||
                !that.input2 ||
                !(
                    that.DriveStart_lon &&
                    that.DriveStart_lat &&
                    that.DriveEnd_lon &&
                    that.DriveEnd_lat
                )
            ) {
                that.$Ctl.message("请输入地点！", "error");
                return;
            }
            that.clearBeginDrive();
            that.driving = new BMap.DrivingRoute(map, {
                policy: type,
                renderOptions: {
                    map: map,
                    autoViewport: true
                }
            });
            let start = new BMap.Point(
                that.DriveStart_lon,
                that.DriveStart_lat
            );
            let end = new BMap.Point(that.DriveEnd_lon, that.DriveEnd_lat);
            that.driving.search(start, end);
        },
        clearBeginDrive() {
            let that = this;
            if (that.driving) {
                that.driving.clearResults();
                that.driving = null;
            }
        },
        //画巡检的线
        addLine(markArr) {
            let icons = new BMap.IconSequence(
                new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
                    scale: 0.6, //图标缩放大小
                    strokeColor: "#fff", //设置矢量图标的线填充颜色
                    strokeWeight: "2" //设置线宽
                }),
                "10",
                "30"
            );
            for (let i = 0; i < markArr.length - 1; i++) {
                let _lineType = markArr[i + 1].result;
                if (_lineType != 1 && _lineType != 0) continue;
                let pointStart = new BMap.Point(
                    markArr[i].lon || markArr[i].longitude || markArr[i].lng,
                    markArr[i].lat
                );
                let pointEnd = new BMap.Point(
                    markArr[i + 1].lon ||
                        markArr[i + 1].longitude ||
                        markArr[i + 1].lng,
                    markArr[i + 1].lat
                );
                map.addOverlay(
                    new BMap.Polyline([pointStart, pointEnd], {
                        enableEditing: false, //是否启用线编辑，默认为false
                        enableClicking: false, //是否响应点击事件，默认为true
                        icons: icons, //[icons]
                        strokeWeight: "10", //折线的宽度，以像素为单位
                        strokeOpacity: 0.8, //折线的透明度，取值范围0 - 1
                        strokeColor: _lineType == 1 ? "#18D77D" : "#A5A5A5" //折线颜色 // 1表示合格，0表示不合格
                    })
                );
            }
        },
        getScore_Industry(score) {
            let fixScore = parseFloat(parseFloat(score).toFixed(1));
            if (79.9 < fixScore && fixScore < 89.9) {
                //风险
                return "1";
            } else if (fixScore < 80) {
                //高危
                return "0";
            } else {
                //安全
                return "2";
            }
        },
        //呼叫中心人员定位
        addCallmarker(positionInfo, iconUrl) {
            let myIcon = new BMap.Icon(iconUrl, new BMap.Size(150, 150));
            let callPoint = new BMap.Point(positionInfo.lon, positionInfo.lat);
            let callMarker = new BMap.Marker(callPoint, { icon: myIcon }); // 创建标注*/
            map.addOverlay(callMarker);
            map.centerAndZoom(callPoint, 19);
            callMarker.setAnimation
                ? callMarker.setAnimation(BMAP_ANIMATION_DROP)
                : "";
        },
        //查找周边（弹窗）
        searchNearby(locationMap, radius, data) {
            let that = this;
            map.clearOverlays();
            let mPoint = new BMap.Point(
                JSON.parse(locationMap).lon,
                JSON.parse(locationMap).lat
            );
            let circle = new BMap.Circle(mPoint, radius, {
                fillColor: "blue",
                strokeWeight: 1,
                fillOpacity: 0.3,
                strokeOpacity: 0.3
            });
            map.addOverlay(circle);
            for (let i = 0; i < data.length; i++) {
                //循环打点
                that.addMarksByType(data[i].list, data[i].type);
            }
            map.centerAndZoom(mPoint, 19);
        },
        //周边（工具包）
        lookAround() {
            let that = this;
            map.addEventListener("click", that.aroundClickEvent);
        },
        aroundClickEvent(e) {
            let that = this;
            //获取周边
            let mapLocation = {
                lon: e.point.lng,
                lat: e.point.lat
            };
            let parames = {
                location: JSON.stringify(mapLocation), // 位置坐标
                orgId: that.$store.state.userInfo.organizationIds // 联网单位Id
            };
            that.$Ctl.openPopup("Peripherals", "", parames);
        },
        //清除标记
        clearanceMarkers() {
            let that = this;
            //清空周边事件
            map&&map.removeEventListener("click", that.aroundClickEvent);
            //清空导航线
            that.clearBeginDrive();
            //清空路况
            that.clearTranficStatus();
            //取消全景事件
            that.destroyPanorama();
            map&&map.clearOverlays();
            that.initBaiduMapMarks(
                that.markDataList.markData,
                that.markDataList.isClear,
                that.markDataList.isFormHome
            );
        },
        //接收推送数据
        pushDataToMap(markType, markData) {
            let that = this;
            let fixpointFlag = false; //是否需要定位
            let addFlag = true; //是否需要打点
            let newArr = []; //新数组，存放
            if ([32, 34, 51].indexOf(parseFloat(markType)) > -1) {
                //安全指数推送 隐患推送 楼栋警情概况
                for (let i = 0; i < that.pushMarkInfor[markType].length; i++) {
                    if (
                        markData.id ==
                        that.pushMarkInfor[markType][i].markerInfo.markData.id
                    ) {
                        that.pushMarkInfor[markType][i]["markerInfo"] &&
                            that.pushMarkInfor[markType][i][
                                "markerInfo"
                            ].remove();
                    } else {
                        newArr.push(that.pushMarkInfor[markType][i]);
                    }
                }
                that.pushMarkInfor[markType] = newArr;
                if (markType == 51 && markData.val.count == 0) {
                    //楼栋警情
                    addFlag = false;
                }
                if (markType == 32 && markData.hiddenDetail.status == 2) {
                    //隐患整改【已完成】
                    addFlag = false;
                }
                if (markType == 32) {
                    //隐患推送
                    fixpointFlag = true;
                }
            } else {
                //带状态的探测器  如果状态是0，则直接去除
                for (let i = 0; i < that.pushMarkInfor[0].length; i++) {
                    if (
                        markData.id ==
                        that.pushMarkInfor[0][i].markerInfo.markData.id
                    ) {
                        map.removeOverlay(that.pushMarkInfor[0][i].markerInfo);
                        map.removeOverlay(that.pushMarkInfor[0][i].markerBg);
                    } else {
                        newArr.push(that.pushMarkInfor[0][i]);
                    }
                }
                that.pushMarkInfor[0] = newArr;
                if (markData.status == 0) {
                    addFlag = false;
                }
                fixpointFlag = true;
            }
            if (!addFlag) return;
            that.addMarksByType([markData], markType);
            fixpointFlag && that.eqLocation(markData);
        },
        openHeatmap(data, maxValue) {
            let that = this;
            map.clearOverlays();
            if (data.length < 1 || !maxValue) {
                // 移除
                heatmapOverlay && heatmapOverlay.hide && heatmapOverlay.hide();
            } else {
                // 创建
                heatmapOverlay = new BMapLib.HeatmapOverlay({ radius: 20 });
                map.addOverlay(heatmapOverlay);
                heatmapOverlay.setDataSet({ data: data, max: maxValue });
                this.setGradient(heatmapOverlay);
                //是否显示热力图
                heatmapOverlay.show();
            }
        },
        setGradient() {
            //百度地图热力图颜色设置
            var gradient = {
                0.0: "rgb(97,201,97)",
                0.25: "rgb(0,0,255)",
                0.5: "rgb(0,255,0)",
                0.75: "rgb(255,255,0)",
                1.0: "rgb(255,0,0)"
            };
            var colors = document.querySelectorAll("input[type='color']");
            colors = [].slice.call(colors, 0);
            colors.forEach(function(ele) {
                gradient[ele.getAttribute("data-key")] = ele.value;
            });
            heatmapOverlay && heatmapOverlay.setOptions({ gradient: gradient });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss">
.baidumap-container {
    height: 100%;
    width: 100%;
    position: relative;
    #baiduMap {
        width: 100%;
        height: 100%;
        //background-color: rgba(6, 23, 35, 1);
        background: url(../../assets/images/fmap/fmap-bg.png) 0 0 no-repeat;
    }
    .zIndex-hidden {
        z-index: 2 !important;
    }
    .tool {
        position: absolute;
        top: 120px;
        right: 25%;
        font-size: 20px;
        color: #fff;
        background-color: rgba(0, 0, 0, 0.8);
        padding: 15px 10px;
    }
    .small-panorama {
        z-index: 1000000;
        position: absolute;
        width: 300px;
        height: 300px;
        left: 30%;
        top: 30%;
        border-radius: 50%;
        border: 2px solid #c6c9ce;
        color: #fff;
        object {
            border-radius: 50%;
            border: 2px solid #c6c9ce;
        }
        > div {
            border-radius: 50%;
        }
    }
    .big-panorama {
        z-index: 1000000;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        color: #fff;
    }
    .big-screen {
        z-index: 1999;
        position: absolute;
        top: 30px;
        right: 50px;
        background-color: rgba(0, 0, 0, 0.8);
        width: 50px;
        text-align: center;
        cursor: pointer;
    }
}
.bdmap-inspect-popup {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
}
.bdmap-maintain-popup {
    width: 211px;
    height: 246px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: relative;
    text-align: center;
    color: #fff;
    font-size: 35px;
    .orgname {
        padding-top: 25px;
        font-size: 18px;
    }
    .score {
        padding-top: 15px;
        font-size: 30px;
    }
}
.bdmap-alramNum-popup {
    width: 150px;
    height: 150px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: relative;
    line-height: 130px;
    text-align: center;
    color: #fff;
    font-size: 30px;
}
.bdmap-score-popup {
    width: 120px;
    height: 160px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    position: relative;
    line-height: 140px;
    text-align: center;
    color: #fff;
    font-size: 18px;
}
.bdmap-hidden-popup {
    width: 180px;
    height: 180px;
    background-repeat: no-repeat;
    background-size: 80% 80%;
    background-position: center center;
    img {
        height: 100%;
        width: 100%;
    }
}
@keyframes opacbdwave {
    from {
        opacity: 0.8;
        width: 0;
        height: 0;
        top: 50%;
        left: 50%;
    }
    to {
        opacity: 0;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
}
.map-circle {
    .w1 {
        animation: opacbdwave 2s infinite;
    }
    .w2 {
        animation: opacbdwave 3s infinite;
    }
    .w3 {
        animation: opacbdwave 4s infinite;
    }
    .w4 {
        animation: opacbdwave 5s infinite;
    }
    .w1,
    .w2,
    .w3,
    .w4 {
        &.bg-10 {
            border: 2px solid rgba(197, 29, 59, 1);
            -webkit-box-shadow: 0px 0px 25px rgba(197, 29, 59, 1) inset;
            box-shadow: 0px 0px 25px rgba(197, 29, 59, 1) inset;
        }
        &.bg-20 {
            border: 2px solid rgba(217, 166, 10, 1);
            -webkit-box-shadow: 0px 0px 25px rgba(217, 166, 10, 1) inset;
            box-shadow: 0px 0px 25px rgba(217, 166, 10, 1) inset;
        }
        &.bg-30 {
            border: 2px solid rgba(119, 119, 119, 1);
            -webkit-box-shadow: 0px 0px 25px rgba(119, 119, 119, 1) inset;
            box-shadow: 0px 0px 25px rgba(119, 119, 119, 1) inset;
        }
        &.bg-40 {
            border: 2px solid rgba(66, 121, 224, 1);
            -webkit-box-shadow: 0px 0px 25px rgba(66, 121, 224, 1) inset;
            box-shadow: 0px 0px 25px rgba(66, 121, 224, 1) inset;
        }
        &.bg-80 {
            border: 2px solid rgba(88, 191, 64, 1);
            -webkit-box-shadow: 0px 0px 25px rgba(88, 191, 64, 1) inset;
            box-shadow: 0px 0px 25px rgba(88, 191, 64, 1) inset;
        }
    }
    &.bdwave {
        position: relative;
        left: -30px;
        top: -5px;
        width: 100px;
        height: 50px;
    }
    &.bdwave * {
        position: absolute;
        border-radius: 100%;
        opacity: 0;
    }
}
</style>
